<template>
  <div class="dingjin">
    <div class="yingfu">
      <span>应付金额：</span><span>￥{{ z_money }}元</span>
    </div>
    <van-radio-group v-model="radio">
      <ul class="fuzhang">
        <li>
          <img src="../../../assets/dingdanxinxi/kehuyue.jpg" alt="" />
          <span>{{ fukuan[0].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="账户余额"
            name="账户余额"
          ></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/zhifubao.jpg" alt="" />
          <span>{{ fukuan[1].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="支付宝"
            name="支付宝"
          ></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/weixin.jpg" alt="" />
          <span>{{ fukuan[2].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="微信"
            name="微信"
          ></van-radio>
        </li>
      </ul>
    </van-radio-group>
    <div class="tongyi_yuedu">
      <van-checkbox
        class="ckecked_tongyi_ground_btn"
        v-model="checked"
        shape="square"
      />
      <span>同意</span>
      <span>《平价分时租车租赁协议》</span>
    </div>
    <van-button
      :disabled="!checked"
      class="buton_botom"
      type="info"
      @click="fukuantotongzhi"
    >
      {{ radio }}
    </van-button>
  </div>
</template>

<script>
import { pay } from "../../../request/userinfo/userinfo";
import { Notify } from 'vant';
export default {
  props: {},
  data() {
    return {
      radio: "账户余额",
      checked: false,
      fukuan: [{ text: "账户余额" }, { text: "支付宝" }, { text: "微信" }],
      z_money: 0,
    };
  },
  methods: {
    fukuantotongzhi() {
      // "2020-11-26 08:18:55 "
      let stime = this.$store.state.startime_;
      let etime = this.$store.state.endtime_;
      let new_stime = stime.getFullYear()+"-"+(stime.getMonth()+1)+"-"+stime.getDate()+" "+new Date().getHours()+":"
                      +new Date().getMinutes()+":"+
                      new Date().getSeconds();
      let new_etime = etime.getFullYear()+"-"+(etime.getMonth()+1)+"-"+etime.getDate()+" "+new Date().getHours()+":"
                      +new Date().getMinutes()+":"+
                      new Date().getSeconds();
      console.log(new_stime);
      console.log(this.z_money,this.$store.state.user.accountBalance)
      if(this.z_money>this.$store.state.user.accountBalance){
        Notify({ type: 'danger', message: '余额不足请充值' })
        this.$router.push('/wallet') 
      }else{
        pay({
        brrowShop: this.$store.state.brrowShop,//门店id
        carId: this.$store.state.carinfo.id,     //车id
        clientId: this.$store.state.user.id,   //用户id
        endTime: new_etime,
        isgetcarathome: "string",
        isreturncarathome: "string",
        payType: 2,
        preparidAmount: this.z_money,            
        returnShop: 1,
        startTime: new_stime,
        state: 4,
        totalPrice: this.z_money,  //支付金额
      }).then(this.$router.push("/dingdantongzhi"));
      }
     
    },
   
  },
  mounted() {
    let money = this.$store.state.carinfo.price;
    let stime = this.$store.state.startime_;
    let etime = this.$store.state.endtime_;
    let time = (etime - stime) / 24 / 60 / 60 / 1000;
    this.z_money = (money - 0) * time;
    // console.log(this.$store.state.carinfo.id)
  },
  components: {},
};
</script>

<style scoped lang="less">
.dingjin {
  width: 100%;
  margin-top: 0.05rem;
  font-size: 0;
  .yingfu {
    width: 95%;
    height: 0.73rem;
    margin: 0 auto;
    border-radius: 0.08rem;
    background: white;
    line-height: 0.73rem;
    padding-left: 0.15rem;
    span {
      font-size: 0.25rem;
      font-weight: 600;
    }
    span:last-child {
      color: #f0230e;
    }
  }
  .fuzhang {
    width: 95%;
    height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-top: 0.25rem;
    position: relative;
    li {
      flex: 1;
      display: flex;
      align-items: center;
      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 0.08rem;
      }
      span {
        font-size: 0.26rem;
        margin-left: 0.26rem;
        font-weight: 600;
      }
    }
  }
  .tongyi_yuedu {
    width: 95%;
    margin: 0.27rem auto 0.6rem auto;
    display: flex;
    align-items: center;
    span:nth-child(2) {
      font-size: 0.22rem;
      color: #666;
      margin-left: 0.2rem;
    }
    span:last-child {
      font-size: 0.23rem;
      color: #4395ff;
      margin-left: 0.29rem;
    }
  }
  .buton_botom {
    width: 100%;
    height: 0.81rem;
    background: #4395ff;
    color: white;
    font-size: 0.29rem;
  }
}
</style>
